<!--
 * @Author: 赵宇
 * @Description: 自定义按钮组件，是希望减少可复用的代码。比如tooltip的功能
 * @Date: 2023-02-01 11:11:24
 * @LastEditTime: 2023-03-06 16:34:31
 * @LastEditors: zhao 13370229059@163.com
 * @FilePath: \pcj\src\components\z-button\index.vue
-->
<template>
  <el-tooltip :disabled="type === 'danger' ? false : !props.title" :content="props.title" placement="top-start">
    <el-popover trigger="hover" v-if="type === 'danger' && isPopover">
      <p>确认删除?</p>
      <p class="dis-flex flex-x-end"><el-button size="small" type="danger" @click="onClick">删除</el-button></p>
      <template #reference>
        <el-button
          :disabled="disabled"
          :type="props.type"
          :circle="circle"
          :plain="plain"
          :round="round"
          :size="size"
          :color="props.color"
          :class="class"
          :loading="props.loading"
        >
          <icon :name="props.icon" v-if="props.icon" :class="{ 'mr-5': $slots.default }" />
          <slot />
        </el-button>
      </template>
    </el-popover>
    <template v-else>
      <el-button
        :disabled="disabled"
        :type="props.type"
        :circle="circle"
        :plain="plain"
        :round="round"
        :size="size"
        :color="props.color"
        :class="class"
        :loading="props.loading"
        @click="onClick"
      >
        <icon :name="props.icon" v-if="props.icon" :class="{ 'mr-5': $slots.default }" />
        <slot />
      </el-button>
    </template>
  </el-tooltip>
</template>

<script setup>
let props = defineProps({
  title: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'primary'
  },
  color: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  },
  class: {
    type: String,
    default: ''
  },
  loading: {
    type: Boolean,
    default: false
  },
  class: {
    type: String,
    default: ''
  },
  size: {
    type: String,
    default: 'default'
  },
  plain: {
    type: Boolean,
    default: false
  },
  round: {
    type: Boolean,
    default: false
  },
  circle: {
    type: Boolean,
    default: false
  },
  disabled: {
    type: Boolean,
    default: false
  },
  isPopover: {
    type: Boolean,
    default: true
  }
});
let emit = defineEmits('click');
const onClick = () => {
  emit('click');
};
</script>

<style lang="scss" scoped></style>
